<template>
  <div class="message-list" ref="listRef">
    <div v-if="messages.length === 0" class="empty-state">
      <Icon icon="mdi:robot" class="robot-icon" />
      <h2>开始一个新的对话</h2>
      <p>你可以问我任何问题</p>
    </div>

    <template v-else>
      <MessageItem
        v-for="message in messages"
        :key="message.id"
        :message="message"
        @edit="handleEdit(message)"
        @delete="handleDelete(message)"
      />
    </template>

    <div v-if="isTyping" class="typing-indicator">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { Icon } from '@iconify/vue'
import MessageItem from './MessageItem.vue'
import { message } from '@/services/message'
import type { ChatMessage } from '@/stores/chat'

const props = defineProps<{
  messages: ChatMessage[]
  isTyping?: boolean
}>()

const emit = defineEmits<{
  (e: 'edit', message: ChatMessage): void
  (e: 'delete', message: ChatMessage): void
}>()

const listRef = ref<HTMLElement | null>(null)

const scrollToBottom = () => {
  if (listRef.value) {
    listRef.value.scrollTop = listRef.value.scrollHeight
  }
}

const handleEdit = (message: ChatMessage) => {
  emit('edit', message)
}

const handleDelete = async (message: ChatMessage) => {
  if (confirm('确定要删除这条消息吗？')) {
    emit('delete', message)
  }
}

onMounted(() => {
  scrollToBottom()
})

watch(
  () => props.messages,
  () => {
    scrollToBottom()
  },
  { deep: true }
)
</script>

<style lang="scss" scoped>
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scroll-behavior: smooth;

  .empty-state {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    
    .robot-icon {
      font-size: 48px;
      margin-bottom: 16px;
      color: var(--primary-color);
    }
    
    h2 {
      font-size: 24px;
      margin-bottom: 8px;
    }
  }
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 16px;
  
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: bounce 1s infinite;
    
    &:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
</style> 